{% extends "base.html" %}

{% block html_title %}
    财务概要
{% endblock html_title %}

{% block page_title %}
    财务概要
{% endblock page_title %}

{% block content %}
<div id="content">
    <el-row :gutter="20">
        <input type="text" placeholder='输入玩家昵称' style='padding:7px;border-radius: 5px;border:none'> {#
        <input type="text" placeholder='输入玩家昵称' style='padding:7px;border-radius: 5px;border:none'>#}
        <button type='submit' style='padding:7px 20px;outline:none;border:none;margin-left:10px;border-radius:5px;background:#3c8dbc;color:white'>搜索</button>
    </el-row>
    {% if current_user.is_admin %}
    <el-row>
        <el-col>
            <button @click='clearStatDataFormVisible = true' style='float:right;font-size:15px;background:#fe5656;color:white;border-radius:5px;padding:7px;border:none;outline:none'>清除财务统计数据</button>
        </el-col>
    </el-row>
    {% endif %}
    <el-row>
        <el-card class="box-card">
            <div slot="header" class="clearfix" style='font-size:18px'>
                <span>总抽水</span>
                <span style='margin-left:40px'>{{financing.deduction}}</span>
            </div>
            <el-row :gutter="20" style='font-size:18px'>
                <el-col :xs="8" :sm="8" :md="4" :lg="4">总上分</el-col>
                <el-col :xs="16" :sm="16" :md="20" :lg="20">{{financing.upPoint}}</el-col>
            </el-row>
            <el-row :gutter="20" style='font-size:18px'>
                <el-col :xs="8" :sm="8" :md="4" :lg="4">总下分</el-col>
                <el-col :xs="16" :sm="16" :md="20" :lg="20">{{financing.downPoint}}</el-col>
            </el-row>
            <el-row :gutter="20" style='font-size:18px'>
                <el-col :xs="8" :sm="8" :md="4" :lg="4">总发包数</el-col>
                <el-col :xs="16" :sm="16" :md="20" :lg="20">{{financing.envelopeCount}}</el-col>
            </el-row>
        </el-card>
    </el-row>
    {% if current_user.is_admin %}
    <el-dialog :visible.sync="clearStatDataFormVisible" title="清除财务统计数据">
        <el-row>
            <ul>
                <li>此操作会删除<b>所有财务统计数据</b></li>
            </ul>
        </el-row>
        <el-form v-loading="clearStatDataFormBlocking" element-loading-text="清除 &hellip;" element-loading-spinner="el-icon-loading">
            <el-form-item>
                <el-button type="danger" @click="clearStatData">清除</el-button>
                <el-button @click="clearStatDataFormVisible = false" class='el-dialog__close'>取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    {% endif %}
</div>
{% endblock content %}

{% block js %}
<script>
    var container = new Vue({
        el: "#content",
        data: function() {
            return {
                financing: {},
                clearStatDataFormVisible: false,
                clearStatDataFormBlocking: false,
            }
        },
        methods: {
            refreshFinancingDetail: function() {
                this.$http.get('/api/financing').then((res) => {
                    this.financing = res.data.financing;
                    this.financing.envelopeAmount = res.data.financing.envelopeAmount*0.01;
                });
            },
            clearStatData:function(){
                this.clearStatDataFormBlocking = true;
                this.$http.post('/api/clear_stat').then((res) => {
                    this.$notify({
                        title: "清除财务统计数据成功",
                        message: "清除财务统计数据成功",
                        type: "success"
                    });
                    setTimeout(() => location.reload(), 500);
                }).catch((err) => {
                    this.$notify.error({
                        title: "清除财务统计数据失败",
                        message: err.response.data.error
                    });
                    this.clearStatDataFormBlocking = false;
                    this.clearStatDataFormVisible = false;
                });
            }
        },
        created: function() {
            this.refreshFinancingDetail();
        }
    });
</script>
{% endblock js %}